<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Anim Test</title>
</head>
<body>
<script src="../test/test.js"></script>
<script>
    KISSY.Test.Config.times = 1;
</script>

<h2>Test Data</h2>
<div id="test" style="width: 10px; height: 20px; position: absolute; top: 200px; left: 50px; text-align: center; color: #999">^o^</div>

<div id="test2" style="width: 50px; height: 20px; text-align: center; position: relative; border: 1px solid green; background: #bca">test2</div>
<button id="test2-btn">run #test2</button>

<div class="test3" style="width: 50px; height: 20px; margin: 10px; text-align: center; position: relative; border: 1px solid #478F45; background: #BDE877">test3 a</div>
<div class="test3" style="width: 50px; height: 20px; margin: 10px; text-align: center; position: relative; border: 1px solid #C18F5A; background: #F7CA9B">test3 b</div>
<button id="test3-btn">run .test3</button>

<div id="test4" style="width: 200px; height: 80px; text-align: center; overflow: hidden; background: #bca">test4</div>
<button id="test4-btn">run #test4</button>

<script src="../../build/kissy/kissy-pkg.js"></script>
<script src="../../build/ua/ua-pkg.js"></script>
<script src="../../build/dom/dom-pkg.js"></script>
<script src="../../build/event/event-pkg.js"></script>
<script src="../../build/node/node-pkg.js"></script>

<script src="anim-easing.js"></script>
<script src="anim.js"></script>
<script src="anim-node-plugin.js"></script>

<!-- Test Cases -->
<script>
    var S = KISSY,

        anim2 = S.Anim(
                '#test',
                'background-color: #fcc; border: 5px dashed #999; width: 100px; height: 40px; left: 900px; top: 285px; opacity: .5; border-color: #999; font-size: 48px; padding: 30px 0; color: #FF3333',
                5,
                'bounceOut'),
    
        anim = S.Anim(
                '#test',
                'width: 50px; height: 40px; left: 500px; background: #cfc; border: 1px solid #ddd; font: 22px Chiller, Batang, serif; padding-top: 10px',
                3,
                S.Easing.elasticOut,
                function() {
                    anim2.run();
                });

    function test_anim() {
        anim.run();
    }

    S.one('#test2-btn').on('click', function() {
        S.one('#test2').animate('left: 500px', 3, S.Easing.backOut);
    });

    S.one('#test3-btn').on('click', function() {
        S.all('.test3').animate('left: 800px', 5, S.Easing.elasticOut);
    });

    // test for 0
    S.one('#test4-btn').on('click', function() {
        S.one('#test4').animate('width: 0', 3);
    });

</script>

</body>
</html>
